<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- basic -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- mobile metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- site metas -->
    <title>若衣电商平台</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- style css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive-->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- fevicon -->
    <link rel="icon" href="images/fevicon.png" type="image/gif" />
    <!-- Scrollbar Custom CSS -->
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
    <!-- Tweaks for older IEs-->
    <link rel="stylesheet" href="css/font-awesome.css">
    <!-- owl stylesheets -->
    <link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/login-User.css">
	<link rel="stylesheet" href="css/user-shop.css" />
	<link rel="stylesheet" href="css/cart.css" />
	<link rel="stylesheet" href="css/item.css" />
	<link rel="stylesheet" href="css/item-class-list.css" />
	<link rel="stylesheet" href="css/shop-class-list.css" />
	<link rel="stylesheet" href="css/open-shop.css" />
	<link rel="stylesheet" href="css/foot.css" />
	<link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/order.css" />
    <link rel="stylesheet" href="css/success.css" />

    <link rel="stylesheet" href="css/jquery.fancybox.min.css" media="screen">

</head>


<body class="main-layout ">
    <!-- loader  -->
    <div class="loader_bg">
        <div class="loader"><img src="images/loading.gif" alt="#" /></div>
    </div>
    <!-- end loader -->
    <!-- header -->
    <header>
        <!-- header inner -->
        <div class="header">

            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section">
                        <div class="full">
                            <div class="center-desk">
                                <div class="logo">
                                    <img id="logo" src="images/logo.png" alt="#">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="menu-area">
                            <div class="limit-box">
                                <nav class="main-menu">
                                    <ul class="menu-area-main">
                                        <li class="active"><a href="javascript:void(0);" id="findgoods">查找商品</a></li>
                                        <li class="active"><a href="javascript:void(0);" id="findshops">查找店铺</a></li>
                                        <li class="active"><a href="javascript:void(0);" id="mycart">我的购物车</a></li>
										<li class="active"><a href="javascript:void(0);" id="myorder">我的订单</a></li>
										<li class="active"><a href="javascript:void(0);" id="openshop">我要开店</a></li>
                                    </ul>
									<div class="login-User last">
											<button type="button" class="btn btn-success log-button">登录</button>
											<button type="button" class="btn btn-primary reg-button">注册</button>
									</div>
									<div  class="success-User last">
										<div class="success-img">
											<img src="images/banner.jpg" />
										</div>
										<div class="success-name">username</div>
									</div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end header inner -->
    </header>
    <!-- 地址隐藏框 -->
	<div class="modal" id="address-list" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<p>地址列表</p>
					<span><a href="javascript:void(0);" id="add-address" data-dismiss="modal">添加地址</a></span>
				</div>
				<div class="modal-body">
					<form>

					</form>
				</div>
				<div class="modal-footer">
					<a class="btn btn-default" data-dismiss="modal">关闭</a>
					<a id="submitaddr" data-dismiss="modal" class="btn btn-primary text-white disabled">提交更改</a>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>



    <!-- 内容显示地方-->
    <div id="mainContentId" class="brand">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="titlepage">
                        <h2>首页</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="brand-bg">
            <div class="container">
                <div class="row">
                    <section class="slider_section">
                        <div id="myCarousel" class="carousel slide banner-main" data-ride="carousel">
                            <div class="carousel-inner">


                            </div>
                            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                                <i class='fa fa-angle-left'></i>
                            </a>
                            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                                <i class='fa fa-angle-right'></i>
                            </a>
                        </div>
                    </section>

                </div>
                <div class="row" >
                    <div class="index-item col-md-12">
                        商品展示
                    </div>
                </div>
                <div class="row" id="indexshops">

                </div>
            </div>
        </div>
	</div>

   

    <!-- footer -->
    <footer>
        <div id="contact" class="foot-under">
            <div class="container">
                <div class="row pdn-top-30">
                    <div class="col-md-12">
                        <div class="footer-box">
                            <div class="foot-p">
                                <p>Copyright &copy; 2022.若衣网络电商平台.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- end footer -->
    <!-- Javascript files-->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/plugin.js"></script>
    <!-- sidebar -->
    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/custom.js"></script>
    <!-- javascript -->

    <script src="js/jquery.fancybox.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".fancybox").fancybox({
                openEffect: "none",
                closeEffect: "none"
            });

            $(".zoom").hover(function() {

                $(this).addClass('transition');
            }, function() {

                $(this).removeClass('transition');
            });
        });
    </script>
	<script type="text/javascript">
        let url = null;
        $(function (){
            doGetUser();
            $(".logo").click(function (){
                location.href=location.href;
            });
            $(".log-button").click(function (){
                location.href ="/login.html";
            });
            $(".reg-button").click(function(){
                location.href ="/register.html";
            });
            $(".success-User")
                .on("click",".success-img",doAboutMySelf)
                .on("click",".success-name",doAboutMySelf);
            $("#findgoods").click(function (){
                url = "/ruoyi/search-item";
                jumphtml(url);
            });
            $("#findshops").click(function (){
                url = "/ruoyi/search-shop";
                jumphtml(url);
            });
            $("#mycart").click(function (){
                url = "/ruoyi/cart";
                jumphtml(url);
            });
            $("#myorder").click(function (){
                url = "/ruoyi/user-order";
                jumphtml(url);
            });
            $("#openshop").click(function (){
                let openshop = $("#openshop").text();
                if (openshop==="我的店铺"){
                    location="http://localhost:9290";
                }else{
                    url = "/ruoyi/open-shop";
                    jumphtml(url);
                }
            });
            $("#add-address").click(function (){
                if ($(".address-select").length>=5){
                    alert("你的地址数量已达上限！");
                    return ;
                }
                url = "/ruoyi/add-address";
                jumphtml(url);
            });
            doGetBanners();
            doGetIndexItems();
            doGetAddress();
        });

        function doGetUser(){
            let url = `/ruoyi/user/getuser`;
            $.ajax({
                url:url,
                dataType:"json",
                success(result){
                    if (result.status===200){
                        doLoadUser(result.data);
                    }
                }
            });
        }

        function doLoadUser(user){
            if (user.length<=0){
                return ;
            }
            $("#mainContentId").data("user",user);

            let shopid = user.shopId;
            $("#openshop").text(shopid===null?"我要开店":"我的店铺");
            $(".success-User").css("display","block");
            $(".login-User").css("display","none");
            $(".success-img").empty();
            $(".success-img").append(`<img src="${user.userImgUrl}">`);
            $(".success-name").text(user.username);
        }

        function doGetAddress(){
            let url = `/ruoyi/address/getaddrlist`;
            $.ajax({
                url:url,
                dataType: "json",
                success(result) {
                    if (result.status===200){
                        doLoadAddress(result.data);
                        doSelectedAddr();
                    }
                }
            });
        }

        function doSelectedAddr(){
            $(".address-select").click(function (){
                $(this).siblings().children("input[name='address']").prop("checked",false);
                $(this).children("input[name='address']").prop("checked",true);
                $("#submitaddr").removeClass("disabled");
            });
            $(".address-del").click(function (){
                if (confirm("是否删除该地址?")){
                    let rowaddr = $(this).parent(".address-select").data("address");
                    let url = `/ruoyi/address/removeaddr`;
                    let params = {"addrId":rowaddr.addrId};
                    $.ajax({
                        url:url,
                        data:params,
                        success(result){
                            if (result.status===200){
                                alert("删除地址成功");
                                doGetAddress();
                            }
                        },
                        error() {
                            alert("删除失败");
                        }
                    });
                }
            });
        }

        function doLoadAddress(addresses){
            let addrbody = $(".modal-body form");
            addrbody.empty();
            for (let i in addresses){
                let addrdiv = $("<div class='address-select'></div>")
                addrdiv.data("address",addresses[i]);
                addrdiv.append(doCreateAddress(addresses[i]));
                addrbody.append(addrdiv);
            }
        }

        function doCreateAddress(address){
            return `<input type="radio" name="address"/>
                        <div class="order-user">
                            <p class="hidden-val">${address.addrId}</p>
                            <p>收货人: <span>${address.addrName}</span></p>
                            <p>联系电话: <span>${address.phone}</span></p>
                            <p>收货地址: <span>${address.address}</span></p>
                        </div>
                        <a href="javascript:void(0);" class="address-del">删除</a>`;
        }

        function jumphtml(url){
            $("#mainContentId").load(url);
        }
        function doAboutMySelf(){
            url = "/ruoyi/user-edit";
            $("#mainContentId").load(url);
        }
        function doGetBanners(){
            let url = `/ruoyi/index/getbanners`;
            $.ajax({
                url:url,
                dataType:'json',
                success(result){
                    if (result.status===200){
                        doLoadBanners(result.data);
                    }
                },
                error(){
                    doLoadBannersError();
                }
            });
        }

        function doGetIndexItems(){
            let url =`/ruoyi/index/getitems`;
            $.getJSON(url,function (result){
                if (result.status===200){
                    doLoadIndexItems(result.data);
                    doLoadClick();
                }
            });
        }

        function doLoadBanners(bannerUrls){
            let i=0;
            for (i;i<bannerUrls.length;i++) {
                $(".carousel-inner").append(doCreateBannerDiv(bannerUrls[i]));
            }
            $(".carousel-inner").children(":first").addClass("active");
            if (i===1){
                $("#myCarousel a,i").css("display","none");
            }
        }

        function doCreateBannerDiv(data){
            return `<div class="carousel-item">
                        <p class="hidden-val">${data.itemId}</p>
                        <img class="first-slide" src="${data.banner}">
                    </div>`;
        }

        function doLoadBannersError(){
            $(".carousel-inner").append(`<div class="carousel-item active">
                                <img class="first-slide" src="images/banner.jpg" alt="First slide">
                            </div>`);
            $("#myCarousel a,i").css("display","none");
        }

        function doLoadIndexItems(items){
            for (let i=0;i<items.length;i++) {
                $("#indexshops").append(doCreateItemDiv(items[i]));
            }
        }

        function doCreateItemDiv(item){
            return `<div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 margin">
                        <div class="item_box">
                            <div class="item-name">
                                <p class="hidden-val">${item.itemId}</p>
                                <img src="${item.image}"/>
                                <p>${item.title}</p>
                                <p>价格: <span>${item.price}</span></p>
                            </div>
                        </div>
                    </div>`;
        }
	</script>
    <script type="text/javascript" src="js/ry/item.js"></script>
</body>
</html>